<!--
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~      http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!-- tab contents -->
<div [ngClass]="['ddp-ui-tab-contents']">
  <div class="ddp-box-message"
       *ngIf="'ENGINE' === metadata.sourceType?.toString() && !isSaveInvalid && isShowMetadataGuide">
    <div class="ddp-box-synch type-info">
      <div class="ddp-txt-synch">
        <em class="ddp-icon-info"></em>
        {{ "msg.metadata.ui.notice" | translate }}
        <a href="javascript:" class="ddp-btn-info-close" (click)="isShowMetadataGuide = false"></a>
      </div>
    </div>
  </div>
  <div class="ddp-box-message" *ngIf="isSaveInvalid">
    <div class="ddp-box-synch type-error">
      <div class="ddp-txt-synch">
        <em class="ddp-icon-info"></em>
        {{'msg.storage.ui.schema.valid.desc' | translate}}
      </div>
    </div>
  </div>
  <div [ngClass]="['ddp-datagrid']">
    <!-- option -->
    <div [ngClass]="['ddp-ui-option']">
      <div class="ddp-wrap-edit">
        <!-- search -->
        <component-input
          [compType]="'search'"
          [showClear]="true"
          [value]="keyword"
          [placeHolder]="'msg.storage.ui.search.data' | translate"
          (changeValue)="changeKeyword($event)">
        </component-input>
        <!-- //search -->
      </div>
      <!-- label -->
      <div class="ddp-wrap-edit">
        <label class="ddp-label-type">
          {{'msg.comm.th.role' | translate}}
        </label>
        <!-- edit option -->
        <div class="ddp-ui-edit-option ddp-inline">
          <div [ngClass]="['ddp-ui-option-in']">
            <label class="ddp-label-radio"
                   *ngFor="let role of roleTypeFilters; let index = index;">
              <input type="radio"
                     [attr.name]="'metadata_role_radio_input_' + UUID"
                     [attr.id]="'metadata_role_radio_input_' + UUID + index"
                     [checked]="role.checked"
                     (click)="selectRoleFilter(role)">
              <i class="ddp-icon-radio"></i>
              <span class="ddp-txt-radio">
                {{role.label}}
              </span>
            </label>
          </div>
        </div>
        <!-- //edit option -->
      </div>
      <!-- //label -->
      <!-- label -->
      <div class="ddp-wrap-edit">
        <label class="ddp-label-type"> {{'msg.storage.ui.type' | translate}} </label>
        <!-- edit option -->
        <div class="ddp-ui-edit-option"
             (click)="isShowTypeFilters = !isShowTypeFilters"
             (clickOutside)="isShowTypeFilters = false">
          <!-- selectbox -->
          <div class="ddp-type-selectbox"
               [class.ddp-selected]="isShowTypeFilters">
            <span class="ddp-txt-selectbox">
              {{selectedType.label}}
            </span>
            <div class="ddp-wrap-popup2"
                 [ngClass]="['ddp-types']">
              <ul class="ddp-list-popup">
                <li [class.ddp-selected]="selectedType === type"
                    *ngFor="let type of typeFilters">
                  <a href="javascript:"
                     (click)="selectTypeFilter(type)">
                    <em [ngClass]="[getFieldTypeIconClass(type.value)]"></em>
                    {{type.label}}
                    <em class="ddp-icon-check"
                        *ngIf="selectedType === type">
                    </em>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <!-- //selectbox -->
        </div>
        <!-- //edit option -->
      </div>
      <!-- //label -->
      <div class="ddp-reset">
        <a href="javascript:"
           class="ddp-btn-reset3"
           (click)="filterInitialize()">
        </a>
      </div>
      <!-- column option -->
      <div class="ddp-option-column ddp-fright">
        <a href="javascript:"
           class="ddp-btn-pop ddp-bg-black"
           (click)="onClickSave()">
          {{'msg.comm.btn.save' | translate}}
        </a>
      </div>
      <!-- //column option -->
    </div>
    <!-- //option -->
  </div>

  <div class="ddp-data-details ddp-ui-preview-contents ddp-info"
       [ngStyle]="{top : !isShowMetadataGuide ? '246px' : '265px'}"
       [class.ddp-info2]="isSaveInvalid"
       (scroll)="onScrollColumnView()">
    <!-- header -->
    <table class="ddp-table-form ddp-table-type2 ddp-table-details ddp-inherit">
      <colgroup>
        <col [style.width]="'100px'" *ngIf="hasMetadataColumnInDatasource()">
        <col [style.width]="'160px'">
        <col [style.width]="'180px'">
        <col [style.width]="'180px'">
        <col [style.width]="'150px'">
        <col [style.width]="'150px'">
        <col [style.width]="'150px'">
        <col [style.width]="'300px'">
      </colgroup>
      <thead>
      <tr>
        <th *ngIf="hasMetadataColumnInDatasource()">
          <div class="ddp-th-long">
            <span class="ddp-th-txt"
                  [attr.title]="('msg.comm.th.role' | translate)">
              {{'msg.comm.th.role' | translate}}
            </span>
          </div>
        </th>
        <th class="ddp-cursor"
            (click)="onClickSort('popularity')">
          <div class="ddp-th-long">
            <div class="ddp-th-icons">
              <div class="ddp-wrap-hover-info">
                <em class="ddp-icon-info3"></em>
                <!-- popup -->
                <div class="ddp-box-layout4 ddp-popularity">
                  <div class="ddp-data-title">
                    {{'msg.metadata.th.column.popularity.tooltip.title' | translate}}
                  </div>
                  <div class="ddp-data-det">
                    {{'msg.metadata.th.column.popularity.tooltip.desc' | translate}}
                    <ul>
                      <li>• {{'msg.metadata.th.column.popularity.tooltip.dashboard.conn' | translate}}
                      </li>
                    </ul>
                  </div>
                </div>
                <!-- //popup -->
              </div>
              <em class="ddp-icon-array-default2"
                  *ngIf="selectedContentSort.key !== 'popularity' || selectedContentSort.sort === 'default'">
              </em>
              <em class="ddp-icon-array-asc2"
                  *ngIf="selectedContentSort.key === 'popularity' && selectedContentSort.sort === 'asc'">
              </em>
              <em class="ddp-icon-array-des2"
                  *ngIf="selectedContentSort.key === 'popularity' && selectedContentSort.sort === 'desc'">
              </em>
            </div>
            <span class="ddp-th-txt"
                  [attr.title]="('msg.metadata.th.column.popularity' | translate)">
              {{'msg.metadata.th.column.popularity' | translate}}
            </span>
          </div>
        </th>
        <th class="ddp-cursor"
            (click)="onClickSort('physicalName')">
          <div class="ddp-th-long">
            <div class="ddp-th-icons">
              <em class="ddp-icon-array-default2"
                  *ngIf="selectedContentSort.key !== 'physicalName' || selectedContentSort.sort === 'default'">
              </em>
              <em class="ddp-icon-array-asc2"
                  *ngIf="selectedContentSort.key === 'physicalName' && selectedContentSort.sort === 'asc'">
              </em>
              <em class="ddp-icon-array-des2"
                  *ngIf="selectedContentSort.key === 'physicalName' && selectedContentSort.sort === 'desc'">
              </em>
            </div>
            <span class="ddp-th-txt"
                  [attr.title]="('msg.metadata.th.physical.name' | translate)">
              {{'msg.metadata.th.physical.name' | translate}}
            </span>
          </div>
        </th>
        <th class="ddp-cursor"
            (click)="onClickSort('name')">
          <div class="ddp-th-long">
            <div class="ddp-th-icons">
              <div class="ddp-wrap-hover-info">
                <em class="ddp-icon-info3"></em>
                <!-- popup -->
                <div class="ddp-box-layout4 ddp-popularity">
                  <div class="ddp-data-title">
                    {{'msg.metadata.th.column.logical.tooltip.title' | translate}}
                  </div>
                  <div class="ddp-data-det">
                    {{'msg.metadata.th.column.logical.tooltip.desc' | translate}}
                  </div>
                </div>
                <!-- //popup -->
              </div>
              <em class="ddp-icon-array-default2"
                  *ngIf="selectedContentSort.key !== 'name' || selectedContentSort.sort === 'default'">
              </em>
              <em class="ddp-icon-array-asc2"
                  *ngIf="selectedContentSort.key === 'name' && selectedContentSort.sort === 'asc'">
              </em>
              <em class="ddp-icon-array-des2"
                  *ngIf="selectedContentSort.key === 'name' && selectedContentSort.sort === 'desc'">
              </em>
            </div>
            <span class="ddp-th-txt"
                  [attr.title]="('msg.metadata.th.name' | translate)">
              {{'msg.metadata.th.name' | translate}}
            </span>
          </div>
        </th>
        <th>
          <div class="ddp-th-long">
            <span class="ddp-th-txt"
                  [attr.title]="('msg.metadata.th.dictionary' | translate)">
              {{'msg.metadata.th.dictionary' | translate}}
            </span>
          </div>
        </th>
        <th>
          <div class="ddp-th-long">
            <span class="ddp-th-txt"
                  [attr.title]="('msg.metadata.th.logical.type'| translate)">
              {{'msg.metadata.th.logical.type'| translate}}
            </span>
          </div>
        </th>
        <th>
          <div class="ddp-th-long">
            <span class="ddp-th-txt"
                  [attr.title]="('msg.storage.ui.th.code.table' | translate)">
              {{'msg.storage.ui.th.code.table' | translate}}
            </span>
          </div>
        </th>
        <th>
          <div class="ddp-th-long">
            <span class="ddp-th-txt"
                  [attr.title]="('msg.storage.ui.th.description' | translate)">
              {{'msg.storage.ui.th.description' | translate}}
            </span>
          </div>
        </th>
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let column of getColumns(); let index = index">
        <td *ngIf="hasMetadataColumnInDatasource()">
          <span class="ddp-box-tag-value"
                [class.ddp-measure]="column.role === ROLE.MEASURE"
                [class.ddp-dimension]="column.role === ROLE.DIMENSION || column.role === ROLE.TIMESTAMP">
            {{column.role === ROLE.MEASURE ? ('msg.comm.name.mea' | translate) : ('msg.comm.name.dim' | translate)}}
          </span>
        </td>
        <td>
          <div class="ddp-bar">
            <span [ngStyle]="{'width': getColumnPopularity(column)}" style="margin-bottom: 10px"></span>
          </div>
        </td>
        <td class="ddp-disabled">
          <div class="ddp-txt-long">
            {{column.physicalName}}
          </div>
        </td>
        <td [ngClass]="['ddp-input-form']"
            #metadataColumnSchemaNameTds
            (click)="focusMetadataColumnSchemaNameInput(index)">
          <input type="text"
                 class="ddp-txt-input"
                 #metadataColumnSchemaNameInputs
                 (blur)="blurMetadataColumnSchemaNameInput(index)"
                 [ngModel]="column.name"
                 (ngModelChange)="column.name = $event; column.nameChangeFl = true; column.replaceFl = true">
        </td>
        <td [ngClass]="{'ddp-disabled': isGeoType(column.type)}">
          <div class="ddp-select-search ddp-pop-select"
               #dictionary
               [class.ddp-selected]="column['isShowDictionary']"
               (mouseleave)="onHideDictionary(column)"
               (mouseenter)="onHoverDictionary(column, index)">
            <a href="javascript:"
               class="ddp-ui-search2"
               (click)="onClickSearchDictionary(column)">
              {{column.dictionary ? column.dictionary.logicalName : ''}}
              <span class="ddp-icon-search">
              </span>
            </a>
            <div class="ddp-box-layout4 ddp-pop-fix type-dictionary" #dictionaryPreview>
              <div class="ddp-data-title ddp-txt-long" title="{{column.dictionary && column.dictionary.name}}">
                {{column.dictionary && column.dictionary.name}}
              </div>
              <div class="ddp-data-code">
                <table class="ddp-table-pop">
                  <colgroup>
                    <col width="100px">
                    <col width="">
                  </colgroup>
                  <tbody>
                  <tr>
                    <th>Full Name</th>
                    <td>{{ column.dictionary && column.dictionary.name }}</td>
                  </tr>
                  <tr>
                    <th>Short Name</th>
                    <td>{{ column.dictionary && column.dictionary.suggestionShortName }}</td>
                  </tr>
                  <tr>
                    <th>Description</th>
                    <td>{{ (column.dictionary && column.dictionary.description) || '-' }}</td>
                  </tr>
                  </tbody>
                </table>
                <a href="javascript:"
                   class="ddp-link-detail"
                   (click)="onClickDictionary(column.dictionary)">
                  {{'msg.storage.btn.detail' | translate}}
                </a>
              </div>
            </div>
          </div>
          <!--          <div class="ddp-ui-tooltip-info"-->
          <!--               *ngIf="column.dictionary">-->
          <!--            <em class="ddp-icon-view-top"></em>-->
          <!--            {{column.dictionary.logicalName}}-->
          <!--          </div>-->
        </td>
        <td class="ddp-inherit ddp-info"
            [class.ddp-disabled]="isSelectedMetadataColumnInColumnDictionaryDefined(column)"
            [class.ddp-selected]="column['typeListFl'] || column.format?.isShowTimestampValidPopup"
            [ngClass]="[TYPE_SELECT_AND_TIMESTAMP_VALID_WRAP_ELEMENT]"
            (click)="onClickTypeSelectAndTimestampValidWrapElement($event, column, logicalType, logicalTypeList)">
          <div class="ddp-wrap-type-option">
            <!-- select -->
            <div #logicalType class="ddp-ui-selected-option"
                 [class.ddp-selected]="column['typeListFl']"
                 (click)="onShowLogicalTypeList(column, logicalType, logicalTypeList)">
                <span class="ddp-link-text ddp-txt-icon">
                  <em [ngClass]="[getFieldTypeIconClass(column.type)]"></em>
                  {{getSelectedLogicalTypeLabel(column)}}
                  <span class="ddp-wrap-icons"
                        [ngClass]="[TYPE_SELECT_PUPOP_ELEMENT]"
                        *ngIf="isLogicalTypesLayerActivation(column)">
                  </span>
                </span>
              <!--suppress JSUnusedGlobalSymbols -->
              <div class="ddp-wrap-popup2 ddp-types ddp-scroll-none"
                   #logicalTypeList>
                <ul class="ddp-list-popup">
                  <li [class.ddp-selected]="isSelectedColumnLogicalType(column, LOGICAL.STRING)">
                    <a href="javascript:"
                       (click)="onChangeLogicalType(column, LOGICAL.STRING)">
                      <em class="ddp-icon-type-ab"></em>
                      {{'msg.storage.ui.list.string' | translate}}
                      <em class="ddp-icon-check"></em>
                    </a>
                  </li>
                  <li [class.ddp-selected]="isSelectedColumnLogicalType(column, LOGICAL.BOOLEAN)">
                    <a href="javascript:"
                       (click)="onChangeLogicalType(column,  LOGICAL.BOOLEAN)">
                      <em class="ddp-icon-type-tf"></em>
                      {{'msg.storage.ui.list.boolean' | translate}}
                      <em class="ddp-icon-check"></em>
                    </a>
                  </li>
                  <li [class.ddp-selected]="isSelectedColumnLogicalType(column, LOGICAL.INTEGER)">
                    <a href="javascript:"
                       (click)="onChangeLogicalType(column, LOGICAL.INTEGER)">
                      <em class="ddp-icon-type-int"></em>
                      {{'msg.storage.ui.list.integer' | translate}}
                      <em class="ddp-icon-check"></em>
                    </a>
                  </li>
                  <li [class.ddp-selected]="isSelectedColumnLogicalType(column, LOGICAL.DOUBLE)">
                    <a href="javascript:"
                       (click)="onChangeLogicalType(column, LOGICAL.DOUBLE)">
                      <em class="ddp-icon-type-float"></em>
                      {{'msg.storage.ui.list.double' | translate}}
                      <em class="ddp-icon-check"></em>
                    </a>
                  </li>
                  <li [class.ddp-selected]="isSelectedColumnLogicalType(column, LOGICAL.TIMESTAMP)">
                    <a href="javascript:"
                       (click)="onChangeLogicalType(column, LOGICAL.TIMESTAMP, index)">
                      <em class="ddp-icon-type-calen"></em>
                      {{'msg.storage.ui.list.date' | translate}}
                      <em class="ddp-icon-check"></em>
                    </a>
                  </li>
                  <li [class.ddp-selected]="isSelectedColumnLogicalType(column, LOGICAL.ARRAY)">
                    <a href="javascript:"
                       (click)="onChangeLogicalType(column, LOGICAL.ARRAY, index)">
                      <em class="ddp-icon-type-array"></em>
                      {{'msg.storage.ui.list.array' | translate}}
                      <em class="ddp-icon-check"></em>
                    </a>
                  </li>
                  <li [class.ddp-selected]="isSelectedColumnLogicalType(column, LOGICAL.LNT)">
                    <a href="javascript:"
                       (click)="onChangeLogicalType(column, LOGICAL.LNT)">
                      <em class="ddp-icon-type-latitude"></em>
                      {{'msg.storage.ui.list.lnt' | translate}}
                      <em class="ddp-icon-check"></em>
                    </a>
                  </li>
                  <li [class.ddp-selected]="isSelectedColumnLogicalType(column, LOGICAL.LNG)">
                    <a href="javascript:"
                       (click)="onChangeLogicalType(column, LOGICAL.LNG)">
                      <em class="ddp-icon-type-longitude"></em>
                      {{'msg.storage.ui.list.lng' | translate}}
                      <em class="ddp-icon-check"></em>
                    </a>
                  </li>
                </ul>
              </div>
              <!-- //popup -->
            </div>
            <!-- //select -->
          </div>
          <div class="ddp-ui-info"
               [hidden]="isShowInformationIcon(column) === false"
               [class.ddp-selected]="column.format?.isShowTimestampValidPopup">
            <!-- TODO 추후 데이터소스 연결시 error2에 있는 hasMetadataColumnInDatasource container와 template 제거 -->
            <ng-container *ngIf="hasMetadataColumnInDatasource(); else none">
              <em [class.ddp-icon-sinfo2]="isValidInformationIcon(column)"
                  [class.ddp-icon-error2]="isInvalidInformationIcon(column)"
                  [ngClass]="[TIMESTAMP_VALID_PUPOP_ELEMENT]"
                  (click)="onClickInfoIcon(column, index)">
              </em>
            </ng-container>
            <ng-template #none>
              <em class="ddp-icon-sinfo2"
                  [ngClass]="[TIMESTAMP_VALID_PUPOP_ELEMENT]"
                  (click)="onClickInfoIcon(column, index)">
              </em>
            </ng-template>
            <!-- format layer -->
            <datetime-valid-popup
              [hidden]="isShowInformationIcon(column) === false"
              [fieldFormat]="column?.format"
              [fieldDataList]="fieldDataList"
              [fieldName]="column.physicalName"
              [isDisableValidation]="!hasMetadataColumnInDatasource()"
              (changedFieldFormat)="column.format = $event; column.replaceFl = true;"
              (changedFieldFormatValid)="setIsExistErrorInFieldListFlag()"
              (closed)="column.replaceFl = true;">
            </datetime-valid-popup>
            <!-- //format layer -->
          </div>
        </td>
        <td>
          <div class=" ddp-select-search ddp-hover-tooltip"
               #codeTable
               [ngClass]="['ddp-pop-select']"
               [class.ddp-selected]="column['codeTableShowFl']"
               (mouseleave)="onHideCodeTable(column)"
               (mouseenter)="onHoverCodeTable(column, index)">
            <a
              href="javascript:"
              (click)="onClickSearchCodeTable(column)"
              class="ddp-ui-search2"
              [class.type-underline-none]="isSelectedMetadataColumnInColumnDictionaryDefined(column)">
              {{column.codeTable ? column.codeTable.name : ''}}
              <span class="ddp-icon-search"
                    [class.ddp-disabled]="isSelectedMetadataColumnInColumnDictionaryDefined(column)">
              </span>
            </a>
            <!-- hover -->
            <!--suppress JSUnusedGlobalSymbols -->
            <div class="ddp-box-layout4 ddp-pop-fix"
                 #codeTablePreview>
              <div class="ddp-data-title ddp-txt-long" title="{{ column.codeTable && column.codeTable.name }}">
                {{ column.codeTable && column.codeTable.name }}
              </div>
              <div class="ddp-data-code ddp-size"
                   *ngIf="column.codeTable">
                <table class="ddp-table-code"
                       [ngClass]="['ddp-inherit']">
                  <colgroup>
                    <col [style.width]="'90px'">
                    <col [style.width]="'*'">
                  </colgroup>
                  <tbody>
                  <tr *ngFor="let pair of getTableCodePair(column.codeTable.id)">
                    <td>
                      <span class="ddp-txt-long" title="{{pair.code}}">{{pair.code}}</span>
                    </td>
                    <td>
                      <span class="ddp-txt-long" title="{{pair.value}}">{{pair.value}}</span>
                    </td>
                  </tr>
                  </tbody>
                </table>
                <a href="javascript:"
                   class="ddp-link-detail"
                   (click)="onClickCodeTableDetails(column.codeTable)">
                  {{'msg.storage.btn.detail' | translate}}
                </a>
              </div>
            </div>
            <!-- //hover -->
          </div>
          <!--          <div class="ddp-ui-tooltip-info"-->
          <!--               *ngIf="column.codeTable && !column['codeTableShowFl']">-->
          <!--            <em class="ddp-icon-view-top"></em>-->
          <!--            {{column.codeTable.name}}-->
          <!--          </div>-->
        </td>
        <td [ngClass]="['ddp-input-form']"
            #metadataColumnSchemaDescriptionTds
            (click)="focusMetadataColumnSchemaDescriptionInput(index, column)">
          <input type="text"
                 class="ddp-txt-input"
                 #metadataColumnSchemaDescriptionInputs
                 (blur)="blurMetadataColumnSchemaDescriptionInput(index)"
                 [ngModel]="column.description"
                 (ngModelChange)="column.description = $event; column.replaceFl = true">
        </td>
      </tr>
      </tbody>
    </table>
    <!-- //header -->
  </div>
</div>
<!-- //tab contents -->

<popup-code-table *ngIf="isShowPopCodeTable" [codeTableId]="selectedCodeTableId" (closeEvent)="isShowPopCodeTable = false;"></popup-code-table>
<popup-column-dictionary *ngIf="isShowPopColDic" [columnDictionaryId]="selectedColDicId" (closeEvent)="isShowPopColDic = false;"></popup-column-dictionary>
